<script setup lang="ts">
import { computed, useTemplateRef } from 'vue';
import { useInventory, useWallet } from '../../../composables';
import { ITEM_TYPE } from '../../../game/data/item/type';
import type { InventorySlotInfoItem } from '../../../game/model/inventory/type';
import { rarityTextColorClass } from '../../../utils';
import { CURRENCY_TYPE } from '../../../game/model/wallet';
import DetailModal from './detail.vue';
import EquipmentPanel from './equipment-panel/index.vue';
import OneClickOperationModal from './one-click-operation/index.vue';
import TempBackpackModal from './temp-backpack/index.vue';
import PageContainer from '../components/page.vue';

const detaukModalRef = useTemplateRef('detaukModalRef');
const oneClickOperationModalRef = useTemplateRef('oneClickOperationModalRef');
const tempBackpackModalRef = useTemplateRef('tempBackpackModalRef');

const { state: inventoryState } = useInventory();
const { state: walletState } = useWallet();

const useCount = computed(() => {
  return inventoryState.value.slots.filter((item) => item).length;
});

function showQuantity(item: InventorySlotInfoItem | null) {
  return item
    ? ([ITEM_TYPE.CULTIVATION_SKILL, ITEM_TYPE.MATERIAL] as string[]).includes(
        item.itemConfig.type
      )
    : false;
}

function onItemClick(item: InventorySlotInfoItem | null) {
  if (!item) return;
  detaukModalRef.value?.show(item);
}

function onOneClick() {
  oneClickOperationModalRef.value?.show();
}

function onTempBackpackClick() {
  tempBackpackModalRef.value?.show();
}
</script>

<template>
  <page-container title="背包">
    <div class="h-full flex flex-col">
      <div class="flex-none">
        <equipment-panel></equipment-panel>
      </div>
      <div class="flex-none p-2 pt-0 text-xs flex justify-between">
        <div class="flex items-center gap-2">
          <div>灵石:</div>
          <div>
            {{ Math.floor(walletState.balances[CURRENCY_TYPE.SPIRIT_STONE]) }}
          </div>
        </div>
        <div class="flex items-center gap-2">
          <div>容量:</div>
          <div>{{ useCount }}/{{ inventoryState.capacity }}</div>
        </div>
      </div>
      <div class="flex-none px-2 pb-2 flex justify-between">
        <a-button size="small" @click="onOneClick">一键</a-button>
        <a-badge :dot="inventoryState.tempSlots.length > 0" status="processing">
          <a-button size="small" @click="onTempBackpackClick">
            临时背包
          </a-button>
        </a-badge>
      </div>
      <div class="flex-1 overflow-auto grid grid-cols-4 gap-2 p-2 pt-0">
        <div
          v-for="(item, index) in inventoryState.slots"
          :key="item?.ins.id || index"
          class="slots h-16"
        >
          <a-card class="h-full" @click="onItemClick(item)">
            <div
              v-if="item?.itemConfig"
              class="p-1 h-full flex flex-col justify-between"
            >
              <div
                :class="[
                  'flex items-center gap-1 text-xs',
                  rarityTextColorClass(item.ins?.payload?.equip?.rarity),
                  rarityTextColorClass(item.itemConfig.rarity),
                ]"
              >
                <span> {{ item.itemConfig.name }} </span>
              </div>
              <div v-if="showQuantity(item)" class="text-right text-[10px]">
                数量: {{ item.ins.quantity }}
              </div>
            </div>
          </a-card>
        </div>
      </div>
      <detail-modal ref="detaukModalRef"></detail-modal>
      <one-click-operation-modal
        ref="oneClickOperationModalRef"
      ></one-click-operation-modal>
      <temp-backpack-modal ref="tempBackpackModalRef"></temp-backpack-modal>
    </div>
  </page-container>
</template>

<style scoped>
.slots :deep(.ant-card-body) {
  padding: 0;
  height: 100%;
}
</style>
